CSS動畫-範例(一)：ㄌㄩㄝ～

2019鐵人賽

卡羅奇奇

團隊浪流連九程式匠自然產生的佛系碼農專區

2018-10-25 03:14:20

3117 瀏覽

分享至

CSS動畫-範例(一)：ㄌㄩㄝ～

哀～到了今天鐵人已經寫了10天～
「下班寫鐵人寫到熬夜，上班打瞌睡又被老闆念」
是不是會想對老闆做這個表情，大概是像下面的圖

既然不能真的對老闆做鬼臉，那就只能在鐵人文發個鬼臉動圖過過乾癮了～
就來看看是怎麼寫的吧～

下面只貼了動畫部分的CSS，如果要看更詳細的部分可看下面連結
<完整CodePen連結點這裡>
基本上都是用了前面教的animation和transform喔～

HTML

<body>
  <div class="face">
    <div class="eye left"></div>
    <div class="eye right"></div>
    <div class="hand left"></div>
    <div class="hand right"></div>
    <div class="mouth">
      <div class="tongue"></div>
    </div>
  </div>
</body>

CSS

.face{
animation:face 3s  cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}
@keyframes face{
  from{
      width:150px;
      border-radius:50% 50% 50% 50%; 
  }
  to{
    width:155px;
    border-radius:50% 50% 30% 30%; 
  }
}
.eye.left{
  animation:eyeleft 3s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
  transform-origin:top right;
}
@keyframes eyeleft{
  from {
    transform:skew(0deg,0deg);
  }
  to{
    transform:skew(-10deg,-20deg);
  }
}
.eye.right{
  animation:eyeright 3s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
  transform-origin:top left;
}
@keyframes eyeright{
  from {
    transform:skew(0deg,0deg);
  }
  to{
    transform:skew(10deg,20deg);
  }
}
.hand.left{
  animation:pullleft 3s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}
@keyframes pullleft{
  from{
    left:-3%;
  }
  to{
    left:-10%;
  }
}
.hand.right{
  animation:pullright 3s cubic-bezier(0.68, -0.55, 0.265, 1.55)  infinite;
}
@keyframes pullright{
  from{
    right:-3%;
  }
  to{
    right:-10%;
  }
}
.mouth{
  animation:pullmouth 3s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}
@keyframes pullmouth{
  from{
    left:33%;
    width:50px;
  }
  to{
   left:23%;
   width:80px;
  }
}
.tongue{
  animation:Tongueout 3s  cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
  transform-origin:top center;
}
@keyframes Tongueout {
  from{
    transform:scale(1,1);
  }
   to{
    transform:scale(1,5);
  }
}

如果忘記了之前學的東西，沒關係來複習一下吧！